@extends('Share/home')
<?php
$title='供应商管理';
$nav_t='系统管理';
$nav_m='供应商管理';
?>
@section('demand-body')
<style>
.supplier{
  width:1280px;
  margin:0px auto;
  overflow:hidden;
  background-color:#ffffff;
}
.supplier-box{
  width:1280px;
  margin:0 auto;
  background-color: #f6f6f6;
  border-top:2px solid #b2cff0;
  border-bottom:2px solid #b2cff0;
  position:relative;
  overflow:hidden;
}
.supplier-box-wrap{
	width: 1088px;
  margin-left: 96px;
  margin-top: 30px;
  overflow: hidden;
}
.supplier-box-com{
  padding-bottom: 14px;
  border-bottom: 1px dashed #d5d5d5;
  overflow: hidden;
}
.supplier-com-wrap{
	padding-bottom: 16px;
  overflow: hidden;
}
.supplier-wrap-cinput{
    width: 340px;
    float: left;
    overflow: hidden;
    margin-bottom: 20px;
}
.supplier-wrap-cinput:nth-child(2){
  margin-right: 300px;
}
.supplier-input-prompt{
  float: right;
  color: red;
  margin-right: 50px;
  line-height: 32px;
}
.supplier-wrap-input{
    overflow: hidden;
    width: 340px;
    float: left;
    margin-bottom: 20px;
}
.supplier-com-name{
	width: 60px;
	float: left;
  line-height: 32px;
  font-size: 16px;
}
.supplier-com-sele{
	float: left;
  line-height: 32px;
}
.supplier-sele-sel{
	width: 150px;
  padding-left: 10px;
  height: 32px;
  border: #c9c9c9 solid 1px;
  background: -webkit-linear-gradient(#fff, #f1f1f1);
  background: -o-linear-gradient(#fff, #f1f1f1);
  background: -moz-linear-gradient(#fff, #f1f1f1);
  background: linear-gradient(#fff, #f1f1f1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1');
  cursor: pointer;
  color: #383838;
  font-size: 14px;
}
.supplier-sele-type{
  width: 150px;
  padding-left: 10px;
  height: 32px;
  border: #c9c9c9 solid 1px;
  background: -webkit-linear-gradient(#fff, #f1f1f1);
  background: -o-linear-gradient(#fff, #f1f1f1);
  background: -moz-linear-gradient(#fff, #f1f1f1);
  background: linear-gradient(#fff, #f1f1f1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1');
  cursor: pointer;
  color: #383838;
  font-size: 14px;
}
.supplier-supp-name{
	width: 60px;
	float: left;
  line-height: 32px;
  font-size: 16px;
}
.supplier-contract-box{
	width: 1088px;
  margin-top: 32px;
  overflow: hidden;
}
.supplier-wrap-tit{
	width: 54px;
  line-height: 40px;
  font-size: 14px;
  color: #292929;
  float: left;
}
.supplier-wrap-content{
	width: 864px;
	float: left;
}
.supplier-content-list{
	width: 990px;
  overflow: hidden;
}
.supplier-list-item{
	border-radius: 2px;
  float: left;
  padding-bottom: 24px;
  margin-right: 32px;
}
.supplier-item-cname{
	display: block;
  outline: none;
  border: 0;
  border-radius: 2px;
  background-color: #e5e5e5;
  padding: 0px 20px;
  height: 40px;
  line-height: 40px;
  color: #292929;
  font-size: 16px;
  text-align: center;
  font-family: 'fzlth';
  cursor: pointer;
}
.supplier-box-button{
	width: 1030px;
  padding-bottom: 32px;
  overflow: hidden;
}
.supplier-button-add{
	float: left;
  margin-right: 32px;
}
.supplier-add-button{
	width: 96px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border: none;
  background: #00a7ea;
  cursor: pointer;
}
.supplier-button-a{
	float: left;
  margin-right: 32px;
  width: 96px;
  height: 32px;
  background: #f6f6f6;
}
.supplier-a-cContract{
	width: 96px;
  height: 32px;
  line-height: 32px;
  color: #00a7ea;
  cursor: pointer;
  display: block;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}
.supplier-cshow-box{
	width: 1280px;
  margin: 0 auto;
  margin-top: 34px;
}
.supplier-cshow-clists{
	width: 1280px;
  background: #f6f6f6;
  height: 36px;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
}
.supplier-clist-items{
	float: left;
  line-height: 36px;
  font-family: 'fzlth';
  font-size: 15px;
  color: #292929;
  text-align: center;
}
.supplier-clist-items:nth-child(1){
	width: 70px;
}
.supplier-clist-items:nth-child(2){
	width: 80px;
}
.supplier-clist-items:nth-child(3){
  width: 80px;
}
.supplier-clist-items:nth-child(4){
	width: 120px;
}
.supplier-clist-items:nth-child(5){
	width: 110px;
}
.supplier-clist-items:nth-child(6){
	width: 130px;
}
.supplier-clist-items:nth-child(7){
	width: 90px;
}
.supplier-clist-items:nth-child(8){
	width: 260px;
}
.supplier-clist-items:nth-child(9){
	width: 80px;
}
.supplier-clist-items:nth-child(10){
	width: 80px;
}
.supplier-clist-items:nth-child(11){
  width: 80px;
}

.supplier-cshow-clist{
	width: 1280px;
  overflow: hidden;
  display: table;
  border-bottom: 1px solid #dddddd;
  height: 46px;
}
.supplier-clist-item{
	vertical-align: middle;
  display: table-cell;
  font-size: 12px;
  color: #666666;
  text-align: center;
}
.supplier-clist-item:nth-child(1){
	width: 70px;
}
.supplier-clist-item:nth-child(2){
	width: 80px;
}
.supplier-clist-item:nth-child(3){
  width: 80px;
}
.supplier-clist-item:nth-child(4){
	width: 120px;
}
.supplier-clist-item:nth-child(5){
	width: 110px;
}
.supplier-clist-item:nth-child(6){
	width: 130px;
}
.supplier-clist-item:nth-child(7){
	width: 90px;
}
.supplier-clist-item:nth-child(8){
	width: 260px;
}
.supplier-clist-item:nth-child(9){
  width: 80px;
}
.supplier-clist-item:nth-child(10){
  width: 80px;
}
.supplier-clist-item:nth-child(11){
  width: 180px;
}

.supplier-item-stop{
	float: left;
	font-size: 14px;
  color: #00a7ea;
  font-family: 'fzlth';
  cursor: pointer;
  margin-top: 7px;
  overflow: hidden;
  width: 50px;
}
.supplier-item-modify{
	float: left;
  margin-right: 20px;
  cursor: pointer;
  width: 96px;
  height: 32px;
  background: #00a7ea;
  line-height: 36px;
  border-radius: 2px;
}
.supplier-modify-anchor{
  cursor: pointer;
  display: block;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: 'fzlth';
  overflow: hidden;
}
.supplier-modify-anchor:hover{
   text-decoration: none;
}
.sContract-list-cur{
   background: #00a7ea;
   color: #fff;
}
.supplier-item-stopR{
  color: red;
}
</style>
   <div class="demand-body">
   <div class="supplier">
   <div class="supplier-box">
   <div class="supplier-box-wrap">
       <div class="J_supplier_form" id="anchor">
           <form  id="J_supplier_form" action="/system/supplier/create" method="post">
           <input type="hidden" name="_token" value="{{csrf_token()}}">
           <div class="supplier-form-box">
           <div class="supplier-box-com">
               <div class="supplier-com-wrap">
              <div class="supplier-wrap-cinput">
                <div class="supplier-com-name">公司:</div>
                <div class="supplier-com-sele">
                  <select class="supplier-sele-sel J_supplier_com" name="company_id">
                  	<option value="">请选择</option>
       			@foreach($companyList as $val)
				<option value="{{$val->id}}">{{$val->Name}}</option>
       			@endforeach 
                  </select>
                </div>
                <p class="supplier-input-prompt">*必选</p>
              </div>   

              <div class="supplier-wrap-cinput">
                <div class="supplier-com-name">职业:</div>
                <div class="supplier-com-sele">
                  <select class="supplier-sele-type J_supplier_type" name="type">
                    <option value="">请选择</option>
                    <option value="1">设计师</option>
                    <option value="2">前端</option>
                  </select>
                </div>
                <p class="supplier-input-prompt">*必选</p>
              </div> 

              <div class="supplier-wrap-input">
                <div class="supplier-supp-name">姓名:</div>
                <div  class="supplier-supp-input">
                  <input type="text" name="name" class="Ly_input J_supplier_name" maxlength="12"/>
                  <p class="supplier-input-prompt">*必填</p>
                </div>
              </div>

              <div class="supplier-wrap-input">
  	            <div class="supplier-com-name">旺旺:</div>
  	            <div  class="supplier-supp-input">
                  <input type="text" name="ww" class="Ly_input J_supplier_ww" maxlength="12"/>
                  <p class="supplier-input-prompt"></p>
                </div>
              </div>

              <div class="supplier-wrap-input">
                <div class="supplier-com-name">QQ:</div>
                <div  class="supplier-supp-input">
                  <input type="text" name="qq" class="Ly_input J_supplier_qq" maxlength="12"/>
                  <p class="supplier-input-prompt"></p>
                </div>
              </div>

              <div class="supplier-wrap-input">
                <div class="supplier-com-name">座机:</div>
                <div  class="supplier-supp-input">
                  <input type="text" name="call" class="Ly_input J_supplier_call" maxlength="20" placeholder="0571-8888888"/>
                  <p class="supplier-input-prompt"></p>
                </div>
              </div>

              <div class="supplier-wrap-input">
                <div class="supplier-com-name">手机:</div>
                <div  class="supplier-supp-input">
                  <input type="text" name="mobile" class="Ly_input J_supplier_phone" maxlength="11"/>
                  <p class="supplier-input-prompt"></p>
                </div>
              </div>
  
              <div class="supplier-wrap-input">
                <div class="supplier-com-name">email:</div>
                <div  class="supplier-supp-input">
                  <input type="text" name="email" class="Ly_input J_supplier_email" maxlength="40"/>
                  <p class="supplier-input-prompt"></p>
                </div>
              </div>
 
               </div>
           </div>
           </div>
           </form>
       </div>
 
 
       <div class="supplier-contract-box">
      <div class="supplier-wrap-tit">合同:</div>
      <div class="supplier-wrap-content">
        <ul class="supplier-content-list">
          @foreach($s_pactList as $val)
		<li class="supplier-list-item">
            	<div class="supplier-item-cname" lid="{{$val->id}}">{{$val->Name}}</div>
          	</li>
          @endforeach
        </ul>
      </div>
      <div class="supplier-box-button">
        <div class="supplier-button-add">
            <input type="button" value="提交" class="supplier-add-button J_supplier_submit" />
        </div>
        <div class="supplier-button-a">
            <a class="supplier-a-cContract" href="{{URL('system/sContract/index')}}">合同管理</a>
        </div>
      </div>
    </div>
  </div>
   </div>
  </div>
    {{--展示的合同--}}
    <div class="supplier-cshow-box">
        <ul class="supplier-cshow-clists">
        	<li class="supplier-clist-items">姓名</li>
            <li class="supplier-clist-items">公司</li>
            <li class="supplier-clist-items">职业</li>
            <li class="supplier-clist-items">旺旺</li>
            <li class="supplier-clist-items">QQ</li>
            <li class="supplier-clist-items">座机</li>
            <li class="supplier-clist-items">手机</li>
            <li class="supplier-clist-items">email</li>
            <li class="supplier-clist-items">合同</li>
            <li class="supplier-clist-items">状态</li>
            <li class="supplier-clist-items">操作</li>
        </ul>
        @foreach($sup_lists as $val)
        <ul class="supplier-cshow-clist" sup_id="{{$val->id}}" listType="">
        	<li class="supplier-clist-item" id="">{{$val->Name}}</li>
            <li class="supplier-clist-item" id="{{$val->ComId}}">{{DB::table('mycom')->where('id',$val->ComId)->pluck('Name')}}</li>
            <li class="supplier-clist-item" id="{{$val->Type}}">{{$val->Type}}</li>
            <li class="supplier-clist-item" id="">{{$val->WW}}</li>
            <li class="supplier-clist-item" id="">{{$val->QQ}}</li>
            <li class="supplier-clist-item" id="">{{$val->Call}}</li>
            <li class="supplier-clist-item" id="">{{$val->Mobile}}</li>
            <li class="supplier-clist-item" id="">{{$val->Email}}</li>
            @if($val->Pactid==NULL)
            <li class="supplier-clist-item" id="">无</li>
		@else
		<li class="supplier-clist-item" id="{{$val->Pactid}}">{{DB::table('pact')->where('id',$val->Pactid)->pluck('Name')}}</li>
		@endif
            @if($val->Del==1)
            <li class="supplier-clist-item" del="{{$val->Del}}">
            启用
            </li>
            @else
            <li class="supplier-clist-item supplier-item-stopR" del="{{$val->Del}}">
            停用
            </li>
            @endif
            
            <li class="supplier-clist-item" id="">
              <div class="supplier-item-modify">
                  <a class="supplier-modify-anchor" href="#anchor">修改</a>
                </div>
              
                @if($val->Del==1)
                <p class="supplier-item-stop supplier-item-stopR J_supplier_stop">
                停用
                </p>
                @else
                <p class="supplier-item-stop J_supplier_stop">
                启用
                </p>
                @endif
              
            </li>
        </ul>
        @endforeach
    </div>
    <script>
    window.onload = function(){
      //弹窗
    var popup1=new popup({
          width:'400',
          height:'400',
          content:'<div class="pop-content"><h5>供应商修改成功!</h5></div><div class="btn-box"><a class="btn-confirm" id="pop_btn_confirm">确定</a></div>',
          hasMask: true,  //是否显示遮罩层
          enter:'spreadIn',
          leave:'spreadOut'
      });
    var popup2=new popup({
          width:'400',
          height:'400',
          content:'<div class="pop-content"><h5>供应商添加成功!</h5></div><div class="btn-box"><a class="btn-confirm" id="pop_btn_confirm">确定</a></div>',
          hasMask: true,  //是否显示遮罩层
          enter:'spreadIn',
          leave:'spreadOut'
      });
    var popup3=new popup({
          width:'400',
          height:'400',
          content:'<div class="pop-content"><h5>操作失败!</h5></div><div class="btn-box"><a class="btn-confirm" id="pop_btn_confirm">确定</a></div>',
          hasMask: true,  //是否显示遮罩层
          enter:'spreadIn',
          leave:'spreadOut'
      });

    if('{{session('callback')}}' == '供应商修改成功'){
      popup1.create();
    }
    if('{{session('callback')}}' == '供应商添加成功'){
      popup2.create();
    }
    
      var supplierSubmit = function(config){
        var _self = this;
        _self.config = $.extend({},config,supplierSubmit.config);
      }
      supplierSubmit.config = {
        emailReg: /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/,
        phoneReg: /0?(13|14|15|18)[0-9]{9}/,
        qqReg: /[1-9][0-9]{4,}/,
        callReg: /\d{3}-\d{8}|\d{4}-\{7,8}/,
        listId: '<input class="J_supplier_listId" type="hidden" name="listId" value="">',
        pactId: '<input class="J_supplier_pactId" type="hidden" name="Pact_id" value="">',
        addButton: '<div class="supplier-button-add"><input type="button" value="添加" class="supplier-add-button J_supplier_add" /></div>'
      }
      supplierSubmit.prototype = {
        _init: function(){

        },
        _supplierSubmit: function(){
          var _self = this;
          _self._focusout();
          _self._sContractChoose();
          _self._submit();
          _self._modify();
          _self._stop();
        },
        //手机号正则
        _testvalphone: function(inputval){
          var _self=this;
          if(inputval != ''){
            if(!_self.config.phoneReg.test(inputval)){
             return false;
            }
            else{
              return true;
            }
          }
          else {
             return true;
          }
        },
        //邮箱正则
        _testvalemail: function(inputval){
          var _self = this;
          if(inputval != ''){
            if(!_self.config.emailReg.test(inputval)){
             return false;
            }
            else{
              return true;
            }
          }
          else {
             return true;
          }
        },
        //qq号正则
        _testvalqq: function(inputval){
          var _self = this;
          if(inputval != ''){
            if(!_self.config.qqReg.test(inputval)){
             return false;
            }
            else{
              return true;
            }
          }
          else {
             return true;
          }
        },
        //座机正则
        _testvalcall: function(inputval){
          var _self = this;
          if(inputval != ''){
            if(!_self.config.callReg.test(inputval)){
             return false;
            }
            else{
              return true;
            }
          }
          else {
             return true;
          }
        },
        _focusout: function(){
          var _self = this;
          $('input,select').on('focusout',function(){   
            if($('.J_supplier_com').val() == ''){
              $('.J_supplier_com').css('border-color','red').addClass('red');
            }
            else{
              $('.J_supplier_com').css('border-color','#c9c9c9').removeClass('red');
            }
            if($('.J_supplier_type').val() == ''){
              $('.J_supplier_type').css('border-color','red').addClass('red');
            }
            else{
              $('.J_supplier_type').css('border-color','#c9c9c9').removeClass('red');
            }         
            if($('.J_supplier_name').val() == ''){
              $('.J_supplier_name').css('border-color','red').addClass('red');
            }
            else{
              $('.J_supplier_name').css('border-color','#c9c9c9').removeClass('red');
            }
            if (_self._testvalphone($('.J_supplier_phone').val())==true) {
              $('.J_supplier_phone').css('border-color','#c9c9c9').removeClass('red');
            }
            else{
              $('.J_supplier_phone').css('border-color','red').addClass('red');
            }
            if (_self._testvalemail($('.J_supplier_email').val())==true) {
              $('.J_supplier_email').css('border-color','#c9c9c9').removeClass('red');
            }
            else{
              $('.J_supplier_email').css('border-color','red').addClass('red');
            }
            if (_self._testvalqq($('.J_supplier_qq').val())==true) {
              $('.J_supplier_qq').css('border-color','#c9c9c9').removeClass('red');
            }
            else{
              $('.J_supplier_qq').css('border-color','red').addClass('red');
            }
            if (_self._testvalcall($('.J_supplier_call').val())==true) {
              $('.J_supplier_call').css('border-color','#c9c9c9').removeClass('red');
            }
            else{
              $('.J_supplier_call').css('border-color','red').addClass('red');
            }
          });
        },
        _sContractChoose: function(){
          var _self = this;
          $('.supplier-item-cname').on('click',function(e){
            var target = e.target;
            if($(target).hasClass('sContract-list-cur')){
              $(target).removeClass('sContract-list-cur');
              $('.J_supplier_pactId').remove();
            }
            else{
              $('.sContract-list-cur').removeClass('sContract-list-cur');
              $(target).addClass('sContract-list-cur');
              $('.J_supplier_pactId').remove();
              $('#J_supplier_form').append(_self.config.pactId);
              $('.J_supplier_pactId').val($('.sContract-list-cur').attr('lid'));
            }
          })
        },
        _submit: function(){
          $('.J_supplier_submit').on('click',function(){
            if($('.red').length == 0 && $('.J_supplier_name').val() != ''){
              $('#J_supplier_form').submit();
            }
            else{
              popup3.create();
            }
          })
        },
        _modify: function(){
          var _self = this;
          $('.supplier-modify-anchor').on('click',function(e){
            var target = e.target;
            var parent = $(target).parents('.supplier-cshow-clist');

            $('.red').css('border-color','#c9c9c9').removeClass('red');
            $('.J_supplier_name').val($(parent).find('.supplier-clist-item').eq(0).text());
            $('.J_supplier_com').val($(parent).find('.supplier-clist-item').eq(1).attr('id'));
            $('.J_supplier_type').val($(parent).find('.supplier-clist-item').eq(2).attr('id'));
            $('.J_supplier_ww').val($(parent).find('.supplier-clist-item').eq(3).text());
            $('.J_supplier_qq').val($(parent).find('.supplier-clist-item').eq(4).text());
            $('.J_supplier_call').val($(parent).find('.supplier-clist-item').eq(5).text());
            $('.J_supplier_phone').val($(parent).find('.supplier-clist-item').eq(6).text());
            $('.J_supplier_email').val($(parent).find('.supplier-clist-item').eq(7).text());
            
            var pId = $(parent).find('.supplier-clist-item').eq(8).attr('id');
            if(pId != ''){
              $('.supplier-item-cname').each(function(i,v){
                if($(v).attr('lid') == pId){
                  $('.sContract-list-cur').removeClass('sContract-list-cur');
                  $(v).addClass('sContract-list-cur');
                  $('.J_supplier_pactId').remove();
                  $('#J_supplier_form').append(_self.config.pactId);
                  $('.J_supplier_pactId').val($('.sContract-list-cur').attr('lid'));
                }
              })
            }
            else{
              $('.sContract-list-cur').removeClass('sContract-list-cur');
              $('.J_supplier_pactId').remove();
            }

            $('#J_supplier_form').append(_self.config.listId);
            $('.J_supplier_listId').val($(parent).attr('sup_id'));

            $('.J_supplier_add').parent().remove();
            $('.J_supplier_submit').parent().after(_self.config.addButton);
            $('.J_supplier_add').on('click',function(){
              $('.J_supplier_pactId').remove();
              $('.J_supplier_listId').remove();
              $('.sContract-list-cur').removeClass('sContract-list-cur');
              $('.Ly_input').val('');
              $('select').val('');
              $('.J_supplier_add').parent().remove();
            })
          })
        },
        _stop: function(){
          var _self = this;
          $('.J_supplier_stop').on('click',function(e){
            var target = e.target;
            var parent = $(target).parents('.supplier-cshow-clist');
            var del = $(parent).find('.supplier-clist-item').eq(9).attr('del');
            var uid = $(parent).attr('sup_id');
            _self._destroy(del,uid,target,parent);
          })
        },
        _destroy: function(del,uid,target,parent){
          $.ajax({
              url: 'destroy',
              type: 'post',
              data: {
                del: del,
                uid: uid,
                _token : '{{csrf_token()}}'
              },
              success: function(data){
                if(del == 1){
                  $(target).text('启用').removeClass('supplier-item-stopR');
                  $(parent).find('.supplier-clist-item').eq(9).attr('del',0);
                  $(parent).find('.supplier-clist-item').eq(9).text('停用').addClass('supplier-item-stopR');
                }
                else{
                  $(target).text('停用').addClass('supplier-item-stopR');
                  $(parent).find('.supplier-clist-item').eq(9).attr('del',1);
                  $(parent).find('.supplier-clist-item').eq(9).text('启用').removeClass('supplier-item-stopR');
                }
              } 
           })
        }
      }
      var supplierSubmit1 = new supplierSubmit({});
      supplierSubmit1._supplierSubmit();
    }
    </script>
   </div>
@endsection